import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Card, Empty, Tag } from 'antd';
import React, { useRef } from 'react';
import { useModel } from 'umi';

import * as c from '@/services/consts';
import * as api from '@/services/userAuthLog';
import * as utils from '@/utils/utils';

export type UserAuthLogTableProps = {
  userId?: string;
};

const UserAuthLogTable: React.FC<UserAuthLogTableProps> = (props) => {
  const { userId } = props;

  if (!userId) {
    return (
      <Card style={{ marginTop: 20, minHeight: 200 }}>
        <Empty
          image={Empty.PRESENTED_IMAGE_SIMPLE}
          description={<span>暂无数据</span>}
        ></Empty>
      </Card>
    );
  }

  const actionRef = useRef<ActionType>();
  const { getProduct } = useModel('useGlobalModel', (model) => ({
    getProduct: model.getProduct,
  }));

  const renderAuthLicense = (record?: API.UserAuthLicense) => {
    if (!record) {
      return null;
    }

    return (
      <>
        <Tag
          color={
            record.typeMemberLevel > c.MemberLevel.Free.value
              ? 'success'
              : 'default'
          }
        >
          {record.typeName}
        </Tag>
        <span style={{ color: '' }}>
          {utils.formatUtcToLocal(record.expireTime)}
        </span>
      </>
    );
  };

  let columns: ProColumns<API.UserAuthLog>[] = [
    // {
    //   title: '产品',
    //   align: 'center',
    //   width: 100,
    //   dataIndex: 'productId',
    //   sorter: true,
    //   renderText: (_, record) => {
    //     if (record.productId) {
    //       const product = getProduct(record.productId);
    //       if (product) {
    //         return product.name;
    //       }
    //     }
    //     return '';
    //   },
    // },
    {
      title: '类型',
      align: 'center',
      width: 80,
      dataIndex: 'type',
      sorter: true,
      renderText: (val: string) => {
        return val.toUpperCase();
      },
    },

    {
      title: '套餐',
      width: 200,
      dataIndex: 'serviceSetName',
      sorter: true,
      renderText: (_, record) => {
        if (record.serviceTypeName) {
          return `(${record.serviceTypeName})${record.serviceSetName}-${record.serviceDays}天`;
        }

        return null;
      },
    },
    {
      title: '原授权',
      width: 300,
      dataIndex: 'beforeLicense',
      render: (_, record) => renderAuthLicense(record.beforeLicense),
    },
    {
      title: '新授权',
      width: 300,
      dataIndex: 'afterLicense',
      render: (_, record) => renderAuthLicense(record.afterLicense),
    },
    {
      title: '授权方式',
      dataIndex: 'tradeType',
      align: 'center',
      sorter: true,
      renderText: (val: string) => {
        return val?.toUpperCase();
      },
    },
    {
      title: '渠道订单号',
      width: 300,
      dataIndex: 'channelTradeNo',
      align: 'center',
      sorter: true,
    },
    {
      title: '日志',
      dataIndex: 'log',
      valueType: 'textarea',
      ellipsis: true,
    },
    {
      title: '操作时间',
      align: 'center',
      width: 180,
      dataIndex: 'createTime',
      sorter: true,
      renderText: (_, record) => {
        return utils.formatUtcToLocal(record.createTime);
      },
    },
    {
      title: '系统',
      align: 'center',
      width: 160,
      dataIndex: 'enter',
      sorter: true,
    },
    {
      title: '处理人',
      width: 300,
      dataIndex: 'handlerUsername',
      sorter: true,
      renderText: (_, record) => {
        let text = '';
        if (record.handlerName) {
          text = `${record.handlerName}`;
        }
        if (record.handlerUsername) {
          text += `(${record.handlerUsername})`;
        }
        return text;
      },
    },
  ];

  return (
    <Card style={{ marginTop: 20, minHeight: 200 }} title="授权日志">
      <ProTable
        rowKey="id"
        options={{
          fullScreen: false,
          reload: true,
          setting: false,
          density: false,
        }}
        columnEmptyText={''}
        actionRef={actionRef}
        columns={columns}
        search={false}
        toolBarRender={false}
        pagination={{
          defaultPageSize: 15,
          pageSizeOptions: ['15', '30', '60', '100'],
          hideOnSinglePage: true,
          // current: pageCurrent,
          // total: totalCount,
        }}
        params={{ userId }}
        request={api.list}
      />
    </Card>
  );
};

export default UserAuthLogTable;
